ul.menubar {
    margin: 0;
    padding: 0;
    border: 1px;
    background: none;
    clear: both;
    overflow: hidden;
    padding-bottom: 8px;
    padding-left: 10px;
    -webkit-box-shadow: none;
}

ul.menubar li {
    background: #4c4d4e;
    border: 1px solid #333;
    font-size: 12px;
    text-align: center;
    -webkit-box-sizing: border-box;
    float: left;
    display: block;
    padding: 4px 12px 4px 12px;
    -webkit-box-shadow: rgba(0,0,0,.2) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
}

ul.menubar li:first-child, ul.menubar li:first-child a {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
}

ul.menubar li:last-child, ul.menubar li:last-child a {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
}

ul.buttonbar {
    border: 1px;
    background: none;
    clear: both;
    overflow: hidden;
    padding-bottom: 8px;
    -webkit-box-shadow: none;
}

ul.buttonbar li {
    background: #4c4d4e;
    border: 1px solid #333;
    font-size: 12px;
    text-align: center;
    -webkit-box-sizing: border-box;
    float: left;
    display: block;
    padding: 4px 12px 4px 12px;
    -webkit-box-shadow: rgba(0,0,0,.2) 1px 1px 3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    width: 50%;
}

.highlight2 {
    border-color : green;
    border-style : solid;
    border-width : 5px;
    background: -webkit-gradient(linear, right top, left top, from(#90ee90), to(#90ee90), color-stop(0.4, red), color-stop(0.6, red));
}

.highlight {
    background: -webkit-gradient(linear, right top, left top, from(#90ee90), to(#90ee90), color-stop(0.4, green), color-stop(0.6, green));
}

.highlight3 {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f4f2f), to(#2f4f2f));
    -webkit-border-radius: 3px;
    -webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 2px;
    width: 100%;
    height: 100%;
}


.highlightr {
    border-color : green;
    border-style : solid;
    border-width : 5px;
    background: -webkit-gradient(linear, right top, left top, from(#90ee90), to(#90ee90), color-stop(0.4, green), color-stop(0.6, green));
}

.statusbar {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#aaa), color-stop(.6,#CCCCCC));
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    color: #444;
    padding: 5px;
    border-top: 1px solid rgba(255,255,255,.2);
    font-weight: bold;
}


/* Main area */
#field {
position: relative;
width: 100%;
height: 425px;
}

/* play court */
#court {
position: relative;
background-color: white;
margin-left: auto;
margin-right: auto;
width: 72%;
height: 78%;
}

#scoreboard {
position: relative;
top: 80%;
left: 10%;
width: 80%;
height: 20px;
font-size: small;
}

#debug {
top: 2%;
width: 99%;
height: 10%;
font-size: small;
position: absolute;
}

table {
font: bold 18px Helvetica;
empty-cells: hide;
word-spacing: 10px;
width: 100%;
border-collapse: collapse;
}

.itable { 
border: 1px solid gray;
text-align: left;
background-color: #eff7ff;
background-color: #fff;
/* background: url(img/toolbar.png) #000000 repeat-x; */
background: url(themes/jqt/img/toolbar.png) top left repeat-x; border-right: 1px solid grey;
border-right: none;
border-right: 1px solid gray;
white-space: nowrap;
border-right: none;
}

.area {
background-color: green;
border-style: solid;
border-width: 5px;
border-color: green;
text-align: center;
position: absolute;
}

/* size of alley lines */
.alley {
width: 10.0%;
height: 45.7%;
}

/* size of service court */
.serv-court {
width: 29.8%;
height: 25.5%;
}

/* size of center mark area  */
.center-mark {
width: 64.5%;
height: 16.7%;
}

/* size of net error area */
.net-err {
border-style: none;
border-width: 5px;
border-color: green;
left: 1.0%;
width: 99.0%;
height: 18.0%;
font-size: small;
}

.sc-area {
border-style: none;
border-width: 6px;
border-color: green;
top: 4.0%;
left: 1.0%;
width: 48%;
height: 34%;
font-size: small;
}

.out-area {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.7%;
margin-top: 0.7%;
width: 72%;
height: 4%;
}

.serv-recv {
position: relative; 
margin-left: auto;
margin-right: auto;
width: 70%;
height: 10%;
}

/* TOP COURT LAYOUT */
/* right alley line 0,0 */
#rse {
left: 1.3%; 
top: 1.0%;
}

/* center mark */
#cm {
left: 16.0%; 
top: 1.0%;
}

/* left alley line 0,0 */
#lse {
left: 85.3%; 
top: 1.0%;
}

#lsc {
top: 21.3%; 
left: 50.5%;
}

#rsc {
top: 21.3%; 
left: 16.0%;
}

#b_lsc_ace, #b_rsc_ace {
top: 24%;
}
#b_lsc_winner, #b_rsc_winner {
top: 24%;
left: 52.0%;
}
#lsc_winner, #rsc_winner {
left: 52.0%;
}
#lsc_return, #rsc_return {
width: 99%;
top: 42%;
}
#b_lsc_return, #b_rsc_return {
width: 99%;
top: 64%;
}

#net_r, #net_l {
top: 82.0%;
}


/* BOTTOM COURT LAYOUT */
#b_lse {
top: 50.6%;
left: 1.3%;
}

#b_lsc {
top: 50.6%;
left: 16.0%;
}

#b_rsc {
top: 50.6%;
left: 50.5%;
}

#b_rse {
top: 50.6%;
left: 85.3%;
}

#b_cm {
top: 79.7%;
left: 16.0%;
}

#b_net_r {
top: 2%;
}

#b_net_l {
top: 2%;
}

/*
#servposr {
position: absolute;
left: 50.0%;
}

#servposl {
position: absolute;
left: 35.0%;
}

#recvposr {
position: absolute;
left: 75%;
}

#recvposl {
position: absolute;
left: 10%;
}
*/

/*
#stat_content {
position: absolute;
top: 60%;
left: 5%;
width: 90%;
font-size: small;
}
*/

#alert {
position: relative;
top: 40%;
left: 20%;
width: 60%;
height: 10%;
font-size: small;
}

.floaty {
-webkit-border-radius: 6px;
-webkit-box-shadow: rgba(0,0,0, .5) 0px 1px 1px;
width: 90%;
margin: 0 5%;
padding: 5px 10px;
background: rgba(255,255,255,.7);
color: #000;
}
